<template>
  <div class="x_lunbo">
    <van-swipe style="height:100%">
      <template v-for="index of 4" :key="index">
        <van-swipe-item><img src="./touxiang.png"></van-swipe-item>
      </template>
      <template #indicator="{ active, total }">
        <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
      </template>
    </van-swipe>
  </div>
  <div class="x_jay">
    <div>
      <span class="x_jay_money">¥1360</span>
      <span class="x_jay_money2" style="text-decoration:line-through">¥2360</span>
    </div>
    <div class="x_jay_title">
      <span class="x_jay_title_small">【水光针】水光针/皮肤修正/祛痘嫩肤/皮肤清洁</span>
    </div>
    <div class="x_jay_promise">
      <van-badge color="red" dot/><span style="margin-left:10px;margin-right:10px;font-size: 16px;">过期自动退</span>
      <van-badge color="red" dot/><span style="margin-left:10px;margin-right:10px;font-size: 16px;">未消费随时退</span>
      <van-badge color="red" dot/><span style="margin-left:10px;margin-right:10px;font-size: 16px;">售后保证</span>
    </div>
  </div>
  <div class="x_Preferential">
    <div style="line-height:50px;text-align:center">优惠卷</div>
    <div>
      <div style="margin-top:15px"><div style="background:#fdf2f0;color: #ef7b93; float: left;width: 40px; text-align: center; border-radius: 12px;">满减</div>满300减20</div><br>
      <div style="margin-top:-10px"><div style="background:#fdf2f0;color: #ef7b93; float: left;width: 40px; text-align: center; border-radius: 12px;">领卷</div>满1000减100</div>
    </div>
    <div><img @click="c_show" style="margin-top:24px;margin-left: 60%;" src="./return2.svg"></div>
  </div>
  <div class="x_size">
    <div class="x_size_but"><span style="font-size:18px;margin-left:20px">已选</span><span style="margin-left:20px;">加强版水光针</span></div>
    <div class="x_size_but"><img style="margin-left:80%" src="./return2.svg" @click="a_show"></div>
    <div class="x_size_but"><span style="font-size:18px;margin-left:20px">项目说明</span></div>
    <div class="x_size_but"><img style="margin-left:80%" src="./return2.svg" @click="b_show"></div>
  </div>
  <div class="x_appraise">
    <div class="x_appraise_statistics">
      <div style="flex:1;height: 40px;line-height: 50px;"><span style="font-size:20px">商品评价</span><span style="margin-left:7px">4.6万+</span></div>
      <div style="flex:1;height:40px;line-height: 55px;"><span style="margin-left:64%">好评率</span><img src="./return2.svg"></div>
    </div>
    <div class="x_appraise_label">
      <van-button round type="primary" size="small" style="background-color:#fdf2f0;border:0">效果很好</van-button>
      <van-button round type="primary" size="small" style="background-color:#fdf2f0;border:0;margin-left: 10px;">价格合理</van-button>
      <van-button round type="primary" size="small" style="background-color:#fdf2f0;border:0;margin-left: 10px;">态度好</van-button>
    </div>
    <div class="x_appraise_user">
      <div>
        <img src="./touxiang.png">
      </div>
      <div>
        <p>1****3</p>
        <p>
          <img src="./xing.svg">
          <img src="./xing.svg">
          <img src="./xing.svg">
          <img src="./xing.svg">
          <img src="./xing.svg">
        </p>
      </div>
      
    </div>
    <div style="width:90%;margin: auto;border-bottom: 1px solid #f5f5f5; height: 200px;">
      <p>我的是基础版的水光针套餐，效果特别好，非常感谢医生的耐心解释，现在面部非常饱满，皮肤肉眼可见的变好了，朋友说…</p>
      <p class="x_appraise_show">
        <img src="./touxiang.png">
        <img src="./touxiang.png">
        <img src="./touxiang.png">
        <img src="./touxiang.png">
      </p>
      <p>
        基础版水光针
      </p>
    </div>
    <div>
      <van-button round type="primary" size="small" style="background:none;border:#ee8877 1px solid; color:#ee8877;margin-left: 37%;margin-top: 15px;">查看全部评价</van-button>
    </div>
  </div>
  <div class="x_diary">
    <div style="width:90%; margin: auto;">
      <div style="height:50px;line-height: 50px;">
        <p>
          <span style="font-size:18px">相关日记</span>
          <span style="margin-left:4px">420篇</span>
          <span style="margin-left:45%">查看全部<img src="./return2.svg"></span>
        </p>
      </div>
      <div style="display:flex">
        <div style="flex:1;"><img class="x_diary_head" src="./touxiang.png" width="56px" height="56px"></div>
        <div style="flex:4;">
          <p>Daisy</p>
          <p>2020/10/09 12:09:09</p>
        </div>
      </div>
      <div style="display:flex;margin-top: 10px;">
        <div style="flex:1;">
          <div style="width:165px;height:110px;background-color: #ee8877;position: relative;" class="child">
            <div style="height:100%"><img src="./touxiang.png"></div>
            <div style="width:40px;height:26px;text-align:center;background-color: #82b3cb;position:absolute; top: 85px;border-radius: 0px 13px 13px 0;color: white;" >术前</div>
          </div>
        </div>
        <div style="flex:1;">
          <div style="width:165px;height:110px;background-color: #ee8877;position: relative;" class="child">
            <div style="height:100%"><img src="./touxiang.png"></div>
            <div style="width:40px;height:26px;text-align:center;background-color: #82b3cb;position:absolute; top: 85px;border-radius: 0px 13px 13px 0;color: white;" >术后</div>
          </div>
        </div>
      </div>
      <div>
        眼综合+全脸脂肪填充后10个月前后对比，做完手术也有10个月左右了，今天和大家分…
      </div>

    </div>
  </div>
  <div class="x_doctor">
    <div style="width:90%;margin:auto; background-color: #f5f5f5;">
      <div style="width:100%;height: 50px;line-height: 50px;font-size: 18px;background: none;">医院/医生</div>

      <div class="x_doctor_box" style="width:100%;height:120px;display: flex;background: none; border-bottom: rgb(169, 169, 169) 1px solid;">
        <div style="flex:1;background: none;">
          <img class="x_doctor_yiyuan" src="./touxiang.png">
        </div>
        <div style="flex:2.3;background: none; display: flex; flex-direction: column;">
          <div style="flex:1;background: none;line-height: 45px;">北京华瑞整形医院</div>
          <div style="flex:1;background: none;"><van-rate style="background: none;" v-model="va" color="#ffc71c" size="16px" readonly /><span style="font-size:12px;margin-left: 20px;">43项目 | 430预约</span></div>
          <div style="flex:1;background: none;line-height: 14px;font-size: 14px;">北京市朝阳区惠里中D座</div>
        </div>
      </div>

      <div class="x_doctor_box" style="background-color: white;width:100%;height:90px;display: flex;">
        <div style="flex:1;"><img class="x_doctor_yisheng" src="./touxiang.png"></div>
        <div style="flex:3.2;display: flex; flex-direction: column;">
          <div style="flex:1;line-height: 45px;">李明睿<span>主任医师</span></div>
          <div style="flex:1;"><van-rate v-model="va" color="#ffc71c" size="16px" readonly /><span style="font-size:12px;margin-left: 20px;">43项目 | 430预约</span></div>
        </div>
      </div>

      <div class="x_doctor_box" style="background-color: white;width:100%;height:90px;display: flex;">
        <div style="flex:1;"><img class="x_doctor_yisheng" src="./touxiang.png"></div>
        <div style="flex:3.2;display: flex; flex-direction: column;">
          <div style="flex:1;line-height: 45px;">李明睿<span>主任医师</span></div>
          <div style="flex:1;"><van-rate v-model="va" color="#ffc71c" size="16px" readonly /><span style="font-size:12px;margin-left: 20px;">43项目 | 430预约</span></div>
        </div>
      </div>
    </div>
  </div>
  <div class="x_detail">
    <div style="width:90%;margin: auto;">
      <p style="font-size:20px;line-height: 50px;">项目详情</p>
      <p>水光针的过程。</p>
      <p>1. 洁面。先把皮肤清洁好。</p>
      <p>2. 敷麻药。麻药膏涂满脸，静止大约要三十分钟到四十分钟。期间会补一些麻药问一问感受。脸部皮肤觉得麻木后，擦掉麻药膏。上嘴唇是麻木感觉最为明显的地方。</p>
      <p>3.湿敷。让皮肤保持在湿润状态。</p>
      <p>4. 水光针的样子。是一支针剂，内含2.5毫升玻尿酸。再配上一个九针的针头。插在机器上注射。</p>
      <p>5. 消毒皮肤。大概是酒精，擦拭了面部，然后开始注射。</p>
      <p>6. 9孔针按照顺序均匀打全脸。疼痛度大概与挤痘向类似，可以忍受。面颊、额头痛感最低，唇部与鼻翼痛感最为明显。大概用时不超过10分钟。</p>
      <p>7. 复面膜。结束打针会马上敷一个医用修复面膜，15分钟后再擦一层修复面霜。</p>
      <p>全部程序完成</p>
    </div>
    <div style="width:90%;margin:30px auto; ">
      <img src="./touxiang.png" width="100%" height="200px" style="margin-bottom: 20px;">
      <img src="./touxiang.png" width="100%" height="200px" style="margin-bottom: 20px;">
      <img src="./touxiang.png" width="100%" height="200px" style="margin-bottom: 20px;">
      <img src="./touxiang.png" width="100%" height="200px" style="margin-bottom: 20px;">
    </div>
  </div>
  <div class="x_recommend">
    <div class="x_recommend_big_box">
      <p><span style="font-weight:bold;font-size: 20px;line-height: 50px;">为你推荐</span></p>
      <template v-for="index of 4" :key="index">
        <div class="x_recommend_small_box">
        <p style="margin-top:7px; text-align: center;"><img src="./touxiang.png"></p>
        <p><span style="width:100%">【皮秒激光】皮秒嫩肤保湿去黄提亮无刺激科学...</span></p>
        <p>
          <van-tag color="#f3b1a5" plain style="width:38px;height: 23px;margin-left: 3px;">特惠</van-tag>
          <van-tag color="#f3b1a5" plain style="width:38px;height: 23px;margin-left: 3px;">秒杀</van-tag>
        </p>
        <p style="color:#ff6262;font-weight:bolder">¥999.0</p>
        <p style="color:#d4d4d8">李明金,北京华瑞整形</p>
      </div>
      </template>
    </div>
  </div>
  <van-action-bar>
    <van-action-bar-icon icon="chat-o" text="免费咨询" @click="zixun" />
    <van-action-bar-icon icon="star" text="收藏" @click="onClickIcon"/>
    <van-action-bar-button color="#be99ff" type="warning" text="加入购物车" @click="a_show"/>
    <van-action-bar-button color="#7232dd" type="danger" text="立即购买" @click="jiesuan"/>
  </van-action-bar>
  <van-popup v-model:show="a__show" position="bottom" :style="{ height: '40%' }">
    <div class="toptop" style="width:100%;height: 50%;background-color: #d4d4d8; display: flex;">
      <div style="flex:1;"><img src="./touxiang.png"></div>
      <div style="flex:1.6;">
        <div style="margin-top:15%;line-height: 40px;">
          <p style="color:#ff6262;font-weight:bolder">¥199.0</p>
          <p style="color:#d4d4d8">有货</p>
          <p>已选：颜色</p>
        </div>
      </div>
    </div>
    <div style="width:100%;height: 50%;border-top: #d4d4d8 1px solid;">
      <p style="color:#d4d4d8;margin-left: 20px; line-height: 40px;">套装类型</p>
      <p style="line-height: 30px;">
        <button style="border:0;margin-left: 20px;border-radius: 5px;" color="#f2f2f2">基础套装</button>
        <button style="border:0;margin-left: 10px;border-radius: 5px;" color="#f2f2f2">加强套装</button>
        <button style="border:0;margin-left: 10px;border-radius: 5px;" color="#f2f2f2">升级套装</button>
      </p>
      <van-button @click="a_show" color="#ec7b67" type="primary" block style="width:90%;margin-left: 20px;margin-top: 10%;">确定</van-button>
    </div>
  </van-popup>


  <van-popup v-model:show="b__show" position="bottom" :style="{ height: '40%' }">
    <div class="b_show_head">
      <div>项目说明</div>
      <div><img src="./cha.svg" @click="b_show"></div>
    </div>
    <div style="text-indent:10px">
      <div style="width:100%;height: 60px;border-bottom: 1px solid #d4d4d8;margin-top: 10px;">
        <p>七天保价</p>
        <p>本商品由平台承诺7天保价</p>
      </div>
      <div style="width:100%;height: 60px;border-bottom: 1px solid #d4d4d8;margin-top: 10px;">
        <p>随时退</p>
        <p>购买后可随时退</p>
      </div>
      <div style="width:100%;height: 60px;border-bottom: 2px solid #d4d4d8;margin-top: 10px;">
        <p>过期退</p>
        <p>过期自动退款</p>
      </div>
    </div>
  </van-popup>



  <van-popup v-model:show="c__show" position="bottom" :style="{ height: '40%' }">
    <div class="c_show_head">
      <div>优惠</div>
      <div><img src="./cha.svg" @click="c_show"></div>
    </div>
    <div style="margin-left:20px;">
      <div style="line-height:40px;">
        <p style="color:#999999">促销活动</p>
        <p><van-tag type="primary" size="large" color="#fff0f0" style="color:#ff7d80">标签</van-tag> 满300减20</p>
      </div>
      <div>
        <p style="color:#999999;line-height:40px;">优惠卷</p>
        <div style="width:93%;border: 1px solid red;">
          <div style="display:flex;height: 80px;">
            <div style="flex:1;text-indent: 10px;">
              <span style="font-size:20px;color: #ec7b67;">¥</span>
              <span style="font-size:45px;color: #ec7b67;font-weight: bolder;">10</span>
            </div>
            <div style="flex:1.5;">
              <p style="margin-top:10%;">新人专属优惠卷</p>
              <p>满300减10</p>
            </div>
            <div style="flex:1.2;">
              <van-button style="margin:20px" round type="primary" size="small" color="#ec7b67">立即领取</van-button>
            </div>
          </div>
          <div style="width:100%;height:40px;border-top: 1px solid red;text-indent: 10px;line-height: 30px;">
            2020.05.09-2020.06.18
          </div>
        </div>
      </div>
    </div>
  </van-popup>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import {useRouter} from 'vue-router';
  const router = useRouter();
  const va=ref(5)
  const zixun=()=>{
    router.push({
      path:'/chat'
    })
  }
  const onClickIcon = () => {
    console.log('点击图标')
  }
  const onClickButton = () => {
    console.log('点击按钮')
  }
  const jiesuan=()=>{
    router.push({
      path:'/shopcarOrder'
    })
  }


  const a__show = ref(false);
  const a_show = () => {
    if(a__show.value == false){
      a__show.value = true;
    }else{
      a__show.value = false;
    }
    
  };


  const b__show = ref(false);
  const b_show = () => {
    if(b__show.value == false){
      b__show.value = true;
    }else{
      b__show.value = false;
    }
    
  };


  const c__show = ref(false);
  const c_show = () => {
    if(c__show.value == false){
      c__show.value = true;
    }else{
      c__show.value = false;
    }
    
  };
</script>

<style scoped>
  div{
    background: white;
  }

  *{
    color: black;
  }

  .x_lunbo{
    height: 400px;
    width: 100%;
    
  }
  .x_lunbo img{
    width: 100%;
    height: 100%;
  }
  .custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
  }




  .x_jay{
    width: 100%;
    height: 150px;
    margin-top: 10px;
  }
  .x_jay_money{
    font-size: 25px;
    font-weight: bolder;
    margin-left: 20px;
    color: rgb(255, 89, 0);
  }
  .x_jay_money2{
    margin-left: 10px;
    color: rgb(169, 168, 168);
  }
  .x_jay_title{
    width: 94%;
    margin: auto;
    white-space: nowrap;
    overflow: hidden;
  }
  .x_jay_title_small{
    font-size: 20px;
  }


  .x_jay_promise{
    width: 94%;
    position: absolute;
    left:3%;
    bottom: 6px;
  }



  .x_Preferential,.x_size{
    width: 100%;
    height: 100px;
    margin-top:10px;
  }
  .x_Preferential{
    display: flex;
  }
  .x_Preferential div:first-child{
    flex: 0.7;
  }
  .x_Preferential div:nth-child(2){
    flex: 2;
  }
  .x_Preferential div:last-child{
    flex: 1;
  }


  .x_size_but{
    width: 50%;
    height: 50%;
    float: left;
    background: none;
    border-bottom: 0.2px rgb(160, 158, 158) solid;
    line-height: 50px;
  }


  .x_appraise{
    width: 100%;
    min-height: 400px;
    margin-top:10px;
  }
  .x_appraise_statistics{
    width:90%;
    display: flex;
    margin: auto;
  }
  .x_appraise_label{
    width: 90%;
    margin: auto;
  }
  .x_appraise_label div{
    float: left;
  }
  .x_appraise_user{
    width:90%;
    margin: auto;
    display: flex;
  }
  .x_appraise_user div:first-child{
    flex: 1;
    height: 65px;
    /* border: 1px solid red; */
  }
  .x_appraise_user div:first-child img{
    width: 80%;
    height: 80%;
    border-radius: 100%;
    margin-top: 10%;
  }
  .x_appraise_user div:last-child{
    flex: 4;
    line-height: 30px;
  }
  .x_appraise_show img{
    width: 80px;
    height: 80px;
    margin-left: 6px;
  }


  .x_diary{
    width: 100%;
    height: 300px;
    margin-top:10px;
  }
  .x_diary_head{
    border-radius: 56px;
  }
  .x_diary .child img{
    width: 100%;
    height: 100%;
  }



  .x_doctor{
    width: 100%;
    height: 400px;
    margin-top: 10px;
    background-color: #f5f5f5;
  }
  .x_doctor_box{
    margin-top: 11px;
  }
  .x_doctor_yiyuan{
    width: 90px;
    height: 90px;
    margin-top: 12px;
  }
  .x_doctor_yisheng{
    width: 60px;
    height: 60px;
    margin: 12px;
    border-radius: 60px;
  }



  .x_detail{
    width: 100%;
    margin-top: 10px;
  }
  .x_recommend{
    width: 100%;
    min-height: 300px;
    margin-top:10px;
    background-color: #f0eeeb;
  }
  .x_recommend_big_box{
    background: none;
    width: 90%;
    min-height: 750px;
    margin: auto;
  }
  .x_recommend_small_box{
    background-color: white;
    width: 47%;
    float: left;
    margin-left: 2%;
    margin-top: 5%;
  }
  .x_recommend_small_box img{
    width:96%;
    height: 190px;
  }
  .toptop img{
    width: 120px;
    height: 120px;
    margin-left: 20px;
    margin-top: 35px;
  }
  .b_show_head{
    width: 100%;
    height: 60px;
  }
  .b_show_head div:first-child{
    position: absolute;
    left: 37%;
    top: 20%;
    font-size: 22px;
  }
  .b_show_head div:last-child{
    position: absolute;
    left: 90%;
    top: 22%;
  }


  .c_show_head{
    width: 100%;
    height: 60px;
  }
  .c_show_head div:first-child{
    position: absolute;
    left: 43%;
    top: 20%;
    font-size: 22px;
  }
  .c_show_head div:last-child{
    position: absolute;
    left: 90%;
    top: 22%;
  }
</style>